<template>
  <div>
    <h2>可筛选</h2>
    <p>使用关键字筛选或自定义筛选方法。 filterMethod可以自定义数据筛选的方法， filterNodeMethod可以自定义节点数据筛选的方法。</p>
    <el-tree-select v-model="value" :data="data" filterable />
    <el-divider />
    filter method:
    <el-tree-select v-model="value" :data="data" :filter-method="filterMethod" filterable />
    <el-divider />
    filter node method:
    <el-tree-select v-model="value" :data="data" :filter-node-method="filterNodeMethod" filterable />
    <el-divider />
    filter 自定义搜索框:
    <el-tree-select ref="treeSelect" v-model="value" :data="data" clearable :filter-node-method="filterNode"
      @visible-change="onVisibleChange">
      <el-input v-model="filterText" prefix-icon="el-icon-search" placeholder="输入关键字进行过滤" clearable size="small" />
    </el-tree-select>
  </div>
</template>

<script>

export default {
  name: 'TreeSelectFilterable',
  data() {
    return {
      value: '',
      data: [
        {
          value: '1',
          label: 'Level one 1',
          children: [
            {
              value: '1-1',
              label: 'Level two 1-1',
              children: [
                {
                  value: '1-1-1',
                  label: 'Level three 1-1-1',
                },
              ],
            },
          ],
        },
        {
          value: '2',
          label: 'Level one 2',
          children: [
            {
              value: '2-1',
              label: 'Level two 2-1',
              children: [
                {
                  value: '2-1-1',
                  label: 'Level three 2-1-1',
                },
              ],
            },
            {
              value: '2-2',
              label: 'Level two 2-2',
              children: [
                {
                  value: '2-2-1',
                  label: 'Level three 2-2-1',
                },
              ],
            },
          ],
        },
        {
          value: '3',
          label: 'Level one 3',
          children: [
            {
              value: '3-1',
              label: 'Level two 3-1',
              children: [
                {
                  value: '3-1-1',
                  label: 'Level three 3-1-1',
                },
              ],
            },
            {
              value: '3-2',
              label: 'Level two 3-2',
              children: [
                {
                  value: '3-2-1',
                  label: 'Level three 3-2-1',
                },
              ],
            },
          ],
        },
      ],
      filterText: '',
    }
  },
  watch: {
    filterText(val) {
      this.$refs.treeSelect.filter(val)
    }
  },
  methods: {
    filterMethod(value) {
      this.data = [...this.data].filter((item) => item.label.includes(value))
    },
    filterNodeMethod(value, data) {
      return data.label.includes(value)
    },
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    onVisibleChange(visible) {
      if (!visible) {
        this.filterText = ''
      }
    }
  },
}
</script>